<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <%--    <!-- 布局样式，每一页都需引入 -->--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/managementLayout.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/lyq/input.css">

    <%--<script src="${pageContext.request.contextPath}/js/monitor.js"></script>--%>
    <%--<script src="${pageContext.request.contextPath}/js/slider.js"></script>--%>

    <!--ztree核心的样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/ztree/css/zTreeStyle/zTreeStyle.css"/>

    <script src="${pageContext.request.contextPath}/js/jquery1.12.4.js"></script>
    <!--ztree核心js文件-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.excheck.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/axios.min.js"></script>

    <style>
        .checkbox-child {
            margin-left: 80px;
        }

        .modal-title {
            text-align: center;
        }

        .modal-body {
            padding: 30px !important;
        }

        .modal-body-content {
            padding: 0 80px;
        }
    </style>

    <title>后台权限管理系统</title>

</head>

<body>

<div id="container">
    <section class="public-main" id="app">

        <%--引入动态菜单栏--%>
        <%--  <jsp:include page="NavigationUtil.jsp" flush="true"></jsp:include>--%>

        <div class="sidebar public-main-left" >
            <ul class="sidebar-menu">
                <!-- <li class="header">主导航</li> -->
                <li class='sidebar-menu-header'>
                    <img src='./img/logo.png' />
                    <span>后台管理系统</span>
                </li>
                <li class="treeview">
                    <a href="index.jsp">
                        <i class="fa fa-dashboard"></i> <span>主  页</span> <i class="fa fa-angle-right pull-right"></i>
                    </a>
                </li>
                <li class="header">后台管理</li>
                <c:forEach items="${RiOneList}" var="one">
                    <li class="treeview">
                        <a href="javascript:void(0)" @click.prevent="showRight(${thisAccount.userCode},${one.rightId})">
                            <i class="fa fa-dashboard"></i> <span>${one.rightName}</span>
                            <i class="fa fa-angle-right pull-right"></i>
                        </a>
                        <ul class="treeview-menu">
                            <li v-for="obj in riTwoList"><a :href="obj.url"><i class="fa fa-circle-o"></i>{{obj.rightName}}</a></li>
                        </ul>
                    </li>
                </c:forEach>
                <c:if test="${!empty RecOneList}">
                    <li class="header">前台管理</li>
                    <c:forEach  items="${RecOneList}" var="RecOne">
                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-dashboard"></i> <span>${RecOne.rightName}</span>
                                <i class="fa fa-angle-right pull-right"></i>
                            </a>
                        </li>
                    </c:forEach>
                </c:if>
            </ul>
        </div>

        <!-- 主体部分 -->

        <div class="public-main-right">
            <header class="nav-wrapper">
                <div class="main-right-header">
                    <div class="location">
                        <strong>课程管理</strong>
                        <span>课程列表</span>
                    </div>
                    <div class='main-right-header-right'>
                            <span class="">
                                <span style="font-weight: bolder">${thisAccount.roleName}</span>：${thisAccount.realName}
                            </span>

                        <span class="">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <c:if test="${thisAccount.head!=''}">
                                    <img src="img/head/${thisAccount.head}" style="width: 25px">
                                </c:if>
                                <c:if test="${thisAccount.head==''}">
                                    <img src="img/head/initial.jpg" style="width: 25px">
                                </c:if>
                            </a>
                        </span>
                        <c:if test="${thisAccount!=null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">退出登录</a></span>
                        </c:if>
                        <c:if test="${thisAccount==null}">
                            <span class=""><a href="${pageContext.request.contextPath}/loginContoller/returnLogin">未登录，快快点击登录吧~</a></span>
                        </c:if>
                    </div>

                </div>
            </header>

            <%--模糊查询框--%>
            <form id="regForm">
                <div class="search">
                    <span>角色:</span>
                    <input id="searchRole" type="text" placeholder="需要查询的内容" name="roleName"/>

                    <span>状态：</span>
                    <select id="searchStatus" name="roleStatus">
                        <option value="0" selected="selected">--请选择--</option>
                        <option value="1" style="font-weight: bolder;color: #2b542c">启用</option>
                        <option value="2" style="font-weight: bolder;color: #880000">禁用</option>
                    </select>

                    <input type="button" value="搜索" @click="searchRoleByNameOrStatus"/>
                    <input type="button" value="重置" @click="cleanSearchWords"/>
                    <a href="#" @click.prevent="addCourse(2)">新建角色</a>
                </div>
            </form>

            <!-- 主体搜索及增加框 -->
            <div class='main-right-content'>
                <!-- 以下容器均可修改，原有id和class别动，否则样式会变 -->

                <table class="providerTable" cellpadding="1" cellspacing="1">
                    <tr class="firstTr">
                        <th width="5%">code</th>
                        <th width="10%">角色名称</th>
                        <th width="30%">角色描述</th>
                        <th width="10%">创建时间</th>
                        <th width="10%">更新时间</th>
                        <th width="10%">账号状态</th>
                        <th width="15%">操作</th>
                    </tr>
                    <tr v-if="roleList.list!=null" v-for="obj,key in roleList.list">
                        <td>{{obj.roleId}}</td>
                        <td>{{obj.roleName}}</td>
                        <td>{{obj.describe}}</td>
                        <td>{{obj.createDate}}</td>
                        <td>{{obj.updateDate}}</td>
                        <td v-if="obj.roleStatus==1" style="font-weight: bolder;color: #2b542c">{{obj.roleStatusName}}
                        </td>
                        <td v-else-if="obj.roleStatus==2" style="color: #880000">{{obj.roleStatusName}}</td>
                        <td>
                            <a href="#" @click.prevent="findById(obj.roleId,0,5)"><img
                                    src="${pageContext.request.contextPath}/img/read.png" alt="查看" title="查看"/></a>
                            <a href="#" @click.prevent="findById(obj.roleId,1,4)"><img src="img/xiugai.png" alt="修改"
                                                                                        title="修改"/></a>
                            <a href="#" @click.prevent="deleteById(key,obj.roleId,3)"><img
                                    src="${pageContext.request.contextPath}/img/schu.png" alt="删除" title="删除"/></a>
                        </td>
                </table>

                <div style="color: #9ea6b9;font-size: small;margin-top: 10px;font-family: 幼圆">
                    当前第{{roleList.pageNum}}页，共{{roleList.pages}}页，共{{roleList.total}}条
                </div>

                <nav aria-label="Page navigation" class="text-right">
                    <ul class="pagination">
                        <template v-if="roleList.hasPreviousPage">
                            <li>
                                <a href="javascript:void(0)" aria-label="Previous"
                                   @click="showList(roleList.pageNum-1)">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        </template>
                        <template v-for="page in roleList.navigatepageNums">
                            <template v-if="roleList.pageNum!=page">
                                <li><a href="javascript:void(0)" @click="showList(page)">{{page}}</a></li>
                            </template>
                            <template v-if="roleList.pageNum == page">
                                <li class="active"><a>{{page}}</a></li>
                            </template>
                        </template>
                        <template v-if="roleList.hasNextPage">
                            <li>
                                <a href="javascript:void(0)" aria-label="Next" @click="showList(roleList.pageNum+1)">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </template>
                    </ul>
                </nav>
            </div>
            <%--<div class='main-right-content'>--%>
            <footer>
                打牛蛙组教育集团
                联系电话：8055-4312-1233
            </footer>

            <%--
            查询角色
            --%>
            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel1">
                                <p style="font-weight: bolder">查询角色信息</p>
                            </h4>
                        </div>
                        <div class="modal-body">
                            <div class="modal-body-content">
                                <div class="form-group">
                                    <label>角色类别：</label>
                                    <span v-if="role.superId==0"><mark>管理员</mark></span>
                                    <span v-else-if="role.superId==1"><mark>主商户</mark></span>
                                    <span v-else-if="role.superId>1"><mark>子商户</mark></span>
                                </div>
                                <div class="form-group">
                                    <label for="roleName">角色名称：</label>
                                    <span id="roleName">{{role.roleName}}</span>
                                </div>
                                <div class="form-group">
                                    <label for="describe">角色描述：</label>
                                    <span id="describe">{{role.describe}}</span>
                                </div>
                                <div class="form-group">
                                    <label for="updateDate">上次修改时间：</label>
                                    <span id="updateDate">{{role.updateDate}}</span>
                                </div>
                                <div class="form-group">
                                    <label for="roleName">账号状态</label>
                                    <select name="roleStatus" v-model="role.roleStatus" disabled>
                                        <option value="1">启用</option>
                                        <option value="2">禁用</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <div>
                                        <label for="roleName">菜单权限</label>
                                    </div>

                                    <%--树形菜单--%>
                                    <input type="hidden" id="thisRoleId" v-model="role.roleId"/>
                                    <ul id="sampleTree" class="ztree"></ul>

                                </div>
                                <div class="form-group">
                                    <div>
                                        <label for="roleName">操作权限</label>
                                    </div>
                                    <label class="checkbox-inline" v-for="obj,index in rightDo" v-if="rightDo!=null">
                                        <mark><input type="button" disabled>{{obj.rightName}}</mark>
                                    </label>
                                    <label class="checkbox-inline" v-if="rightDo==null || rightDo==0">
                                        <span v-if="obj==null">暂无操作权限！父级爸爸可以考虑新增哟~</span>
                                    </label>

                                </div>
                            </div>
                            <%--form-group--%>
                        </div>
                        <%--<div class="modal-body-content">--%>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        </div>
                    </div>
                </div>
                <%--class="modal-content">--%>
            </div>
            <%-- <div class="modal-dialog modal-lg" role="document">--%>
        </div>
        <%--id：myModal1--%>

</div>
<%--id：myModal--%>

<%--确认新增角色框--%>
<div id="checkRole" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">请选择角色</h4>
            </div>
            <div class="modal-body text-center">
                <c:if test="${thisAccount.superId==0}">
                    <button id="choiceBusiness" type="button" class="btn btn-success">新增商户
                    </button>
                </c:if>
                <c:if test="${thisAccount.superId==0 || thisAccount.superId==1}">
                    <button id="choiceBusinessChild" type="button" class="btn btn-warning">新增子商户</button>
                </c:if>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</div>
<%--public.main.right--%>
</section>

<!-- 每一页需加上slider，否则js动效无法显示 -->
<%--<script src="${pageContext.request.contextPath}/js/slider.js"></script>--%>
<!-- 每一页需加上slider，否则js动效无法显示 -->

<script src="${pageContext.request.contextPath}/js/lyq/input.js"></script>
<script type="text/javascript">

    // 模态框触发
    new Vue({
        el: "#app",
        data: {
            roleList: {},  //存储所有角色信息
            role: {},  //存储单个用户信息
            rightDo: {},  //存储当前角色的操作权限
            rightTwoList: {},  //存储用户二级菜单
            superBusinessList: {},  //父级商户列表
            updateRoleId: {},  //修改商户的id号
            pageInfo: {},
            riTwoList: {}
        },
        methods: {
            //显示所有列表
            showList: function (page) {
                var _this = this;
                axios.get("${pageContext.request.contextPath}/roleController/roleList", {params: {page: page}}).then(function (response) {
                    //获取后台返回的数据。response.data
                    _this.roleList = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            findBussinessList: function () {
                var _this = this;
                //查询所有父级商户列表
                axios.get("${pageContext.request.contextPath}/roleController/superBusinessList").then(function (response) {
                    _this.superBusinessList = response.data;
                    console.log('superBusinessList======', _this.superBusinessList);
                }).catch(function (error) {
                    console.log(error);
                })
            },
            findById: function (id, num, roleId) {
                var _this = this;
                _this.findAllRights(id);  //生成当前树形菜单
                axios.get("${pageContext.request.contextPath}/roleController/checkRights", {
                    params: {
                        roleId,
                        roleId
                    }
                }).then(function (response) {

                    if (roleId == response.data) {
                        axios.get("${pageContext.request.contextPath}/roleController/findById", {params: {id: id}}).then(function (response) {
                            _this.role = response.data;
                            console.log("role=========", _this.role);
                            _this.findRightDoById(id);  //查询操作权限
                        }).catch(function (error) {
                            console.log(error);
                        })
                        if (num == 0) {
                            $('#myModal1').modal("show");
                        } else {
                            _this.update(id, roleId);
                        }
                    } else {
                        alert("小宝贝暂无此权限哦~");
                    }
                })
            },
            findRightDoById: function (id, num) {
                var _this = this;
                axios.get("${pageContext.request.contextPath}/roleController/findRightDoById", {params: {id: id}}).then(function (response) {
                    _this.rightDo = response.data;
                    console.log("_this.rightDo====",_this.rightDo);
                }).catch(function (error) {
                    console.log(error);
                })
            },
            update: function (id, roleId) {

                var _this = this;
                _this.updateRoleId = id;
                _this.findBussinessList();  //展示商户列表

                axios.get("${pageContext.request.contextPath}/roleController/checkRights", {
                    params: {
                        roleId,
                        roleId
                    }
                }).then(function (response) {
                    if (roleId == response.data) {
                        window.location.href = "http://localhost:8085/addBusinessController/findthisRole?roleId=" + id;
                    } else {
                        alert("小宝贝暂无此权限哦~");
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            },
            deleteById: function (index, id, roleId) {
                var _this = this;
                axios.get("${pageContext.request.contextPath}/roleController/checkRights", {
                    params: {
                        roleId,
                        roleId
                    }
                }).then(function (response) {
                    if (roleId == response.data) {
                        if (confirm("小宝贝真的不想看见我吗？")) {
                            axios.delete("${pageContext.request.contextPath}/roleController/deleteRoleById", {params: {id: id}}).then(function (response) {
                                if ("1" == response.data) {
                                    alert("我真的走啦，希望下次还能见到你哦~");
                                } else {
                                    alert("删除失败~重新试试咯~咱们太有缘分啦")
                                }
                            }).catch(function (error) {
                                console.log(error);
                            })
                            _this.roleList.list.splice(index, 1);  //通过下标移除
                        }
                    } else {
                        alert("小宝贝暂无此权限哦~");
                    }
                })
            },
            addCourse: function (roleId) {
                var _this = this;
                axios.get("${pageContext.request.contextPath}/roleController/checkRights", {
                    params: {
                        roleId,
                        roleId
                    }
                }).then(function (response) {
                    if (roleId == response.data) {

                        _this.findBussinessList();  //展示商户列表
                        _this.findAllRights();   //生成树状菜单

                        //判断需要新增商户或子商户
                        $('#checkRole').modal("show");
                        $("#choiceBusiness").click(function () {
                            //添加主商户
                            $('#checkRole').modal("hide");
                            // $('#Business').modal("show");
                            window.location.href = "http://localhost:8085/AddRole.jsp";
                        })
                        $("#choiceBusinessChild").click(function () {
                            //添加子商户
                            $('#checkRole').modal("hide");
                            // $('#BusinessChild').modal("show");
                            window.location.href = "http://localhost:8085/addBusinessController/showSuperRoleList";
                        })
                    } else {
                        alert("小宝贝暂无此权限哦~")
                    }

                })
            },
            findRightChildsBySuperId: function (superId) {
                var _this = this;
                axios.get("${pageContext.request.contextPath}/roleController/findRightsBySuperId", {params: {id: superId}}).then(function (response) {
                    _this.rightTwoList = response.data;
                }).catch(function (error) {
                    console.log(error);
                })
            },
            searchRoleByNameOrStatus: function () {
                var _this = this;
                axios.post("${pageContext.request.contextPath}/roleController/searchRoleByNameOrStatus", $("#regForm").serialize()).then(function (response) {
                    _this.roleList = response.data;
                }).catch(function (error) {
                    console.log(error);
                })
            },
            cleanSearchWords: function () {
                $("#searchRole").val(null);
                $("#searchStatus").val(0);
            },
            findAllRights: function (roleId) {
                var _this = this;
                //生成所有树状菜单栏
                $.ajax({
                    url: "${pageContext.request.contextPath}/roleController/findAccountRights",
                    data: {"id": roleId},
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        console.log(data);
                    }
                })

                $.ajax({
                    url: "${pageContext.request.contextPath}/roleController/findAllRights",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        console.log(data);
                        //1、初始化树型菜单
                        // jQuery.fn.zTree.init(jQuery("#sampleTree"), settins2, data).expandAll(true);
                        //2、获取树型菜单，默认选中某些节点
                        $.ajax({
                            url: "${pageContext.request.contextPath}/roleController/findAccountRights",
                            data: {"id": roleId},
                            dataType: "json",
                            async: false,
                            success: function (data2) {
                                var zTreeObj = $.fn.zTree.init($("#sampleTree"), settins2, data); //初始化树
                                zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
                                console.log('data2=======', data2);
                                $(data2).each(function (i, v) {
                                    //查询节点
                                    var node = zTreeObj.getNodeByParam("rightId", v.rightId);
                                    if (node != null) {
                                        //选中
                                        zTreeObj.checkNode(node, true, false);
                                    }
                                })
                                //选中节点置灰
                                var nodesSelect = zTreeObj.getCheckedNodes(true);
                                if (nodesSelect != null) {
                                    for (var k = 0; k < nodesSelect.length; k++) {
                                        nodesSelect[k].chkDisabled = true;
                                        zTreeObj.updateNode(nodesSelect[k]);
                                    }
                                }
                                //未勾选节点置灰
                                var nodesUnSelect = zTreeObj.getCheckedNodes(false);
                                if (nodesUnSelect != null) {
                                    for (var j = 0; j < nodesUnSelect.length; j++) {
                                        nodesUnSelect[j].chkDisabled = true;
                                        zTreeObj.updateNode(nodesUnSelect[j]);
                                    }
                                }
                            }
                        })
                    }
                })
            },
            showRight: function (id, superId) {
                var _this = this;
                axios.get("/account/showRightTwo", {
                    params: {
                        id: id,
                        superId: superId,
                    }
                })
                    .then(function (response) {
                        _this.riTwoList = response.data;
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }
        },
        //实例化Vue之后调用showList方法
        created: function () {
            this.showList();
        }
    });

    /*
     * event:事件对象
     * treeId： 当前树的id属性值
     * treeNode： 当前树节点,通过当前节点可以获取所有的数据
     */
    function show(event, treeId, treeNode) {
        var id = treeNode.rightId;  //获取id的值
        var pId = treeNode.rightSuperId;  //获取pid的值
        var name = treeNode.rightName;  //获取name的值
        console.log(name);

    }

    /*function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("sampleTree");
        //勾选 或 取消勾选 单个节点
        //第3个参数 true 表示按照 setting.check.chkboxType 属性进行父子节点的勾选联动操作  false 表示只修改此节点勾选状态，无任何勾选联动操作
        zTree.checkNode(treeNode, !treeNode.checked, true, true);
        return true;
    }*/
    function onCheck(e, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("sampleTree"),
            nodes = treeObj.getCheckedNodes(true);
        for (var i = 0; i < nodes.length; i++) {
            console.log("节点id:" + nodes[i].id + " 节点名称:" + nodes[i].rightSuperId + "父节点：" + nodes[i].rightSuperId); //获取选中节点的值
        }
    }

    ($.sidebarMenu = function(menu = '.sidebar-menu') {
        var animationSpeed = 300;
        $(menu).on('click', 'li a', function(e) {
            var $this = $(this);
            var checkElement = $this.next();
            if (checkElement.is('.treeview-menu') && checkElement.is(':visible')) {
                checkElement.slideUp(animationSpeed, function() {
                    checkElement.removeClass('menu-open');
                });
                checkElement.parent("li").removeClass("active");
            } else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
                var parent = $this.parents('ul').first();
                var ul = parent.find('ul:visible').slideUp(animationSpeed);
                ul.removeClass('menu-open');
                var parent_li = $this.parent("li");
                checkElement.slideDown(animationSpeed, function() {
                    checkElement.addClass('menu-open');
                    parent.find('li.active').removeClass('active');
                    parent_li.addClass('active');
                });
            }
            if (checkElement.is('.treeview-menu')) {
                e.preventDefault();
            }
        });
    })()

    /*
       *  树形控件生成多级菜单
       */

    // 定义节点数据，采用简单数据格式(Array格式或isSampleData)
    var settins2 = {
        view: {
            showLine: false,  //去掉节点之间的关联线
            selectedMulti: false //禁止选择多个节点
        },
        data: {
            key: {
                //显示的名称(和数据库相同)
                name: "rightName",
                url : ""

            },
            simpleData: {
                enable: true, //开启简单数据格式
                idKey: "rightId", //主键id
                pIdKey: "rightSuperId" //父节点
            }
        },
        check: {
            enable: true, //启用ckeck功能
            //Y:勾选后的情况；N:取消勾选后的情况；p：父节点联动；s：子节点联动；"ps"父子节点都联动；"父子节点都不联动，只选中本节点"
            chkboxType: {"Y": "ps", "N": "ps"}
        },
        callback: {
            //绑定函数
            // beforeClick:beforeClick,
            //onCheck: onCheck

        }
    }

</script>
</body>

</html>